import React, { Component, createRef } from 'react';

// 非受控组件 使用ref
// 给每一个元素设置ref属性,然后通过ref 属性获取该标签节点, 进而获取标签节点的值(说白了就是操作dom)
// 通过 createRef方法创建ref对象
class From1 extends Component {
    constructor() {
        super()
        this.ref1 = createRef();
        this.ref2 = createRef();
        this.ref3 = createRef();
    }
    state = {
        username: "李铁",
        sel: '兄弟',
        sex: '男'
    }

    render() {
        return (
            <div>
                <p>
                    <input placeholder='用户名' ref={this.ref1} name='username' defaultValue={this.state.username} />
                </p>
                <p>
                    <select defaultValue={this.state.sel} name='sel' ref={this.ref2}>
                        <option value='江山'>江山</option>
                        <option value='美人'>美人</option>
                        <option value='兄弟'>兄弟</option>
                    </select>
                </p>
                <p ref={this.ref3}>
                    <input type='radio' value='男' name='sex' defaultChecked={this.state.sex === '男'} />男
                    <input type='radio' value='女' name='sex' defaultChecked={this.state.sex === '女'} />女
                </p>
                <p>
                    <button onClick={this.submitFn}>提交表单</button>
                </p>
            </div>
        );
    }

    submitFn = () => {
        console.log(this.ref1.current.value);
        console.log(this.ref2.current.value);
        console.log(this.ref3.current.children);
    }
}

export default From1;
